<!doctype html>
<html>
    <head>
        <!-- meta -->
        <!-- meta -->
        <title>Pie Chart</title>
        <!-- css -->
        <link href="../styles/examples.css" rel="stylesheet"/>
        <link href="../../source/styles/nova.common.css" rel="stylesheet"/>
        <link href="../../source/styles/nova.css" rel="stylesheet"/>
        <!-- css -->
        <!-- script -->
        <script src="../js/jquery.js"></script>
        <script src="../../source/js/nova.core.js"></script>
        <script src="../../source/js/nova.data.js"></script>
        <script src="../../source/js/nova.chart.js"></script>
        <script src="../../source/js/nova.draganddrop.js"></script>
        <script src="../../source/js/nova.slider.js"></script>
        <!-- script -->
    </head>
    <body>
        <!-- nav -->
        <!-- nav -->
        <!-- description -->
        <div class="description">Pie Chart</div>
        <!-- description -->
        <div id="example" class="n-content">
            <div class="configuration" style="width:170px;">
                <span class="configHead">Configuration</span>
                <span class="configTitle">Pie Chart</span>
                <ul class="options">
                    <li>
                        <input id="labels" type="checkbox" autocomplete="off" />
                        <label for="labels">Show labels</label>
                    </li>
                    <li>
                        <input id="alignCircle" name="alignType"
                               type="radio" value="circle" checked="checked"
                               disabled="disabled" autocomplete="off" />
                        <label for="alignCircle">- aligned in circle</label>
                    </li>
                    <li>
                        <input id="alignColumn" name="alignType"
                               type="radio" value="column"
                               disabled="disabled" autocomplete="off" />
                        <label for="alignColumn">- aligned in columns</label>
                    </li>
                    <li>
                        <label for="startAngle">Start angle</label>
                        <input id="startAngle" style="width: 160px;" />
                    </li>
                    <li>
                        <label for="padding">Padding</label>
                        <input id="padding" style="width: 160px;" />
                    </li>
                </ul>
            </div>
            <div style="margin-right:210px;">
                <div id="chart" style="width:500px; height:400px;margin: 0 auto;"></div>
            </div>
            <script>
                var data = [
                    {
                        "source": "Hydro",
                        "percentage": 22
                    },
                    {
                        "source": "Solar",
                        "percentage": 2
                    },
                    {
                        "source": "Nuclear",
                        "percentage": 49
                    },
                    {
                        "source": "Wind",
                        "percentage": 27
                    }
                ];

                function createChart() {
                    $("#chart").novaChart({
                        theme: $(document).data("novaSkin") || "nova",
                        title: {
                            text: "Brean-up of Spain Electricity Production for 2008"
                        },
                        legend: {
                            position: "bottom"
                        },
                        dataSource: {
                            data: data
                        },
                        series: [{
                            type: "pie",
                            field: "percentage",
                            categoryField: "source",
                            startAngle: 160
                        }],
                        tooltip: {
                            visible: true,
                            template: "${ category } - ${ value }%"
                        }
                    });
                }

                $(document).ready(function() {
                    createChart();
                    setupConfigurator();

                    $(document).bind("nova:skinChange", function(e) {
                        createChart();
                        resetConfigurator();
                    });
                });

                function setupConfigurator() {
                    $("#startAngle").novaSlider({
                        showButtons: false,
                        max: 360,
                        val: 160,
                        slide: function(e) {
                            $("#startAngle").val(e.value);
                            setTimeout(refresh);
                        },
                        change: refresh
                    });

                    $("#padding").novaSlider({
                        showButtons: false,
                        min: 30,
                        max: 100,
                        val: 60,
                        tickPlacement: "none",
                        slide: function(e) {
                            $("#padding").val(e.value);
                            setTimeout(refresh);
                        },
                        change: refresh
                    });

                    resetConfigurator();

                    $(".configuration").live("change", refresh);
                }

                function resetConfigurator() {
                    $("#labels").prop("checked", false);
                    $("#startAngle").data("novaSlider").value(160);
                    $("#padding").data("novaSlider").value(60);
                }

                function refresh() {
                    var chart = $("#chart").data("novaChart"),
                        pieSeries = chart.options.series[0],
                        labels = $("#labels").prop("checked"),
                        alignInputs = $("input[name='alignType']"),
                        alignLabels = alignInputs.filter(":checked").val(),
                        startAngle = parseInt($("#startAngle").val(), 10),
                        padding = parseInt($("#padding").val(), 10);

                    chart.options.transitions = false;
                    pieSeries.labels.visible = labels;
                    pieSeries.labels.align = alignLabels;
                    pieSeries.startAngle = startAngle;
                    pieSeries.padding = padding;

                    alignInputs.attr("disabled", !labels);

                    chart.refresh();
                }
            </script>
        </div>
        <!-- tools -->
        <!-- tools -->
    </body>
</html>

